<template>
  <div id="adv">
    <div v-if="exist">
      <a href="https://bss.csdn.net/m/product/chinamobile2021?utm_medium=ad.589">
        <img  @mouseover="stopScrolling"
              @mouseout="startScrolling"
              :src="pictures[curNum]" alt="nginx"
        >
      </a>

      <div id="dots">
          <span v-for="i in count" :key="i"
                :class="{'dot-selected': i-1===curNum,'dot-no-states':i-1!==curNum}"
                @click="dotSwitch(i-1)"
          ></span>
      </div>

      <div id="close">
        <div>推广</div>
        <div @click="exist=false">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
import {ip} from "../../data/ip"
export default {
  name: "Advertisement",
  data(){
    return {
      exist: true,
      pictures:[],
      count: 0,
      curNum: -1,
      interval: null
    }
  },
  mounted(){
    this.pictures = [ip + "/static/1.png",
      ip +"/static/2.png",
      ip +"/static/3.jpg"]
    this.count = this.pictures.length
    this.curNum = 0
    this.startScrolling()
  },
  methods:{
    startScrolling(){
      this.interval = setInterval(()=>{
        this.curNum = (this.curNum + 1) % this.count
      },5000)
    },//startScrolling
    stopScrolling(){
      clearInterval(this.interval)
    },
    dotSwitch(n){
      if(n !== this.curNum){
        this.curNum = n
      }
    }
  }
}
</script>

<style scoped>
#adv{
  clear:both;
  position: relative;
  padding-top:20px;
  width:100%;
}
#adv img{
  width:100%;
}

#dots{
  position: absolute;
  bottom:8%;
  left: 50%;
  transform:translate(-50%,-50%);
}
#dots span{
  display: inline-block;
  width:10px;
  height:10px;
  border-radius: 5px;
  margin-right:5px;
}
.dot-selected{
  background-color:#FC4349;
}
.dot-no-states{
  background-color:#D7DADB;
  cursor: pointer;
}

/* 关闭按钮 */
#close{
  position: absolute;
  right:10px;
  top:24px;
}
#close > div{
  display: inline-block;
  line-height: 20px;
  height:20px;
  padding:0 3px;
  border:1px solid #D7DADB;
  color:white;
  cursor:pointer;
}
</style>
